<template>
  <div>
    <navigationBar/>
    <div class="user-info">
      <div class="user-header">
        <div type="file" accept="image/png,image/gif,image/jpeg">
          <img class="user-pic" :src="User_pic" alt="User Avatar"/>
        </div>
        <h2>{{ Nickname }}</h2>
      </div>
      <div class="user-details">
        <table class="details-table">
          <tr>
            <td class="label">账户名:</td>
            <td>{{ Username }}</td>
          </tr>
          <tr>
            <td class="label">邮箱:</td>
            <td>{{ Email }}</td>
          </tr>
          <tr>
            <td class="label">创建日期:</td>
            <td>{{ formatDate(CreateDate) }}</td>
          </tr>
          <tr>
            <td class="label">更新日期:</td>
            <td>{{ formatDate(UpdateDate) }}</td>
          </tr>
        </table>
      </div>
      <div class="normal-button" @click="jumpMyOrder">我的订单</div>
      <!-- <button class="my-order" @click="jumpMyOrder">我的订单</button> -->
      <div class="normal-button" @click="jumpEdit">编辑信息</div>
      <div class="logout-button" @click="logout">退出登录</div>
      <!-- <button @click="jumpEdit">编辑信息</button> -->
    </div>
  </div>
</template>

<script>

// import axios from 'axios';

export default {
  name: 'UserInfo',
  data() {
    return {
      User_pic: this.globalData.User.User_pic,
      Nickname: this.globalData.User.Nickname,
      Username: this.globalData.User.Username,
      Email: this.globalData.User.Email,
      CreateDate: this.globalData.User.CreateDate,
      UpdateDate: this.globalData.User.UpdateDate,
      newUserPic: null
    }
  },
  watch: {
    '$route' (to, from) {
      this.$router.go(0);
    }
  },
  methods: {
    jumpMyOrder() {
      this.$router.push({name: 'OrderList'})
    },
    jumpEdit() {
      this.$router.push({name: 'EditUserInfo'})
    },
    formatDate(date) {
      if (!date) return 'N/A';
      const d = new Date(date);
      return d.toLocaleDateString();
    },
    logout() {
      this.globalData.User.Id = -1
      this.globalData.User.Token = ''
      this.globalData.User.Username = ''
      this.globalData.User.Nickname = ''
      this.globalData.User.Email = ''
      this.globalData.User.User_pic = ''
      this.globalData.User.CreateDate = ''
      this.globalData.User.UpdateDate = ''
      localStorage.clear()
      this.Id = -1
      this.Token = ''
      this.Username = ''
      this.Nickname = ''
      this.Email = ''
      this.User_pic = ''
      this.CreateDate = ''
      this.UpdateDate = ''
      this.$router.push({name: 'Home'})
    }
  },
  beforeCreate() {
    this.globalData.User.loadInfo()
    if(this.globalData.User.Token === '' || this.globalData.User.Token === null) {
      this.$router.push({name: 'Connect'})
    } else {
      this.globalData.User.getInfo()
    }
  },
  beforeMount() {
    console.log(this)
    // this.globalData.User.loadInfo()
    if(this.User_pic === '' || this.User_pic === null) {
      this.User_pic = require('@/assets/' + 'no-avatar.jpg')
    }
  }
};
</script>

<style scoped>
.user-info {
  max-width: 600px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 55px;
}
.user-header {
  text-align: center;
}
.user-pic {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.details-table {
  width: 100%;
  border-collapse: collapse;
}
.details-table td {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}
.label {
  font-weight: bold;
}
.normal-button {
  user-select:none;
  display:block;
  margin:5px auto;
  /* width:max-content; */
  width:80px;
  text-align: center;
  padding: 2px;
  font-weight: bold;
  color: rgba(43, 43, 43, 0.75);
  border: 3px solid rgba(128, 128, 128, 0.75);
  border-radius: 5px;
}
.normal-button:hover {
  border: 3px solid rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  background-color:rgba(210, 210, 210, 0.202);
}

.logout-button {
  user-select:none;
  display:block;
  margin:10px auto 3px;
  /* width:max-content; */
  width:80px;
  text-align: center;
  padding: 2px;
  font-weight: bold;
  color: rgb(144, 0, 0);
  border: 3px solid rgb(147, 0, 0);
  border-radius: 5px;
}
.logout-button:hover {
  border: 3px solid rgb(255, 0, 0);
  color: rgb(255, 0, 0);
}
</style>
